<template>
	<div class="container">
  <span class="none">{{pcRoutes}}</span>
		<div class="jx-container">
      <el-form ref="pc_form" :model="mainPage.params" :rules="rules" label-width="130px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item_2">
              <div class="title">
                客户信息
              </div>
              <el-form-item label="客户姓名：" prop="consumerLoginname">
                <el-input v-model="mainPage.params.consumerLoginname" placeholder="请输入客户姓名">
                </el-input>
              </el-form-item>
              <el-form-item label="客户手机号：">
                <el-input v-model="mainPage.params.mobile" placeholder="请输入商户手机号">
                </el-input>
              </el-form-item>
            </div>
            <div class="item_2">
              <div class="title">
                订单信息
              </div>
              <el-form-item label="订单类型：" prop="type">
                <el-select class="tel-value" v-model="mainPage.params.institutionOrderCatalog" placeholder="请选择">
                  <el-option label="赠送" value="1"></el-option>
                  <el-option label="其他" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="订单号：">
                <el-input v-model="mainPage.params.institutionOrderId" :disabled="true" placeholder="请输入订单号"></el-input>
              </el-form-item>
            </div>
          </div>
        </div> 
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <div class="title">
                产品信息
              </div>
              <div class="jx-table" style="padding-top: 0;">
                <div class="title" style="margin-bottom: 0;">
                  <span style="color: #999;font-size: 14px;font-weight: 500;">产品模板：</span>
                  <el-select class="tel-value" v-model="mainPage.params.institutionTemplateId" placeholder="请选择" style="display: inline-block;width: 29%;">
                    <el-option v-for="(item, index) in mainPage.model_list" :key="index" :label="item.institutionTemplateName" :value="item.institutionTemplateId"></el-option>
                  </el-select>
                  <div class="add-new">
                    <el-button class="jx-btn" type="primary" @click="viewRow">添加产品</el-button>
                  </div>
                </div>
                <el-table :data="mainPage.list" border style="width: 100%" v-loading="mainPage.boo.loading_list">
                  <el-table-column type="index" label="序列" width="60" align="center">
                  </el-table-column>
                  <el-table-column prop="serviceProductName" label="产品名称" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="serviceProductList" label="产品配置清单" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="serviceProductLocationProvinceCity" label="适用地区" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column prop="serviceProductCount" label="产品数量" align="center" :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                      <el-button @click="deteleRow(scope.$index)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="reset">重置</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.isSubmit" @click="submitRow('pc_form')">确定</el-button>
      </div>
    </div>
    <!-- 选择产品 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="75%">
      <div slot="title" class="header-title">
        <span class="title-name">添加产品</span>
      </div>
      <div class="jx-detail" style="padding: 0;">
        <div class="detail-item detail-address">
          <div class="item">
            <div class="select-type">
              <div class="item table-item" style="margin: 0;">
                <div class="right" style="padding: 0;">
                  <div class="item-inline">
                    <span>地区选项：</span>
                    <el-radio-group v-model="product.other.product_radio">
                      <el-radio :label="1">不限地区</el-radio>
                      <el-radio :label="2">手动添加地区</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </div>
              <div class="item table-item" v-if="product.other.product_radio == 2" style="margin: 10px auto;">
                <div class="right" style="padding: 0;">
                  <div class="item-inline">
                    <span>搜索地区：</span>
                    <el-autocomplete
                      class="inline-input"
                      v-model="product.other.city"
                      :fetch-suggestions="querySearch"
                      placeholder="请输入地区"
                      value-key="institutionTemplateProvinceCity"
                      :trigger-on-focus="false"
                      @select="handleSelect"
                    ></el-autocomplete>
                  </div>
                </div>
              </div>
            </div>
            <div class="quick-tag" v-if="product.city_select.length != 0">
              <span class="bg">限制地区</span>
              <el-tag style="margin-right: 15px" v-for="(item, index) in product.city_select" :key="index" closable @close="close_city(index)">{{item.institutionTemplateProvinceCity}}</el-tag>
            </div>
          </div>
        </div>
        <div class="detail-item">
          <div class="item">
            <div class="select-type">
              <div class="item table-item" style="margin: 0;">
                <div class="right" style="padding: 0;">
                  <div class="item-inline">
                    <span>搜索商品：</span>
                    <el-input class="tel-value" v-model="product.params_list.serviceProductName" placeholder="请输入商品名称"></el-input>
                  </div>
                  <div class="item-inline">
                    <el-button class="jx-btn" type="primary" @click="getProductList">搜索</el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="jx-table">
              <el-table @selection-change="selectProduct" :data="product.list" border style="width: 100%" v-loading="product.boo.loading_list">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序列" width="55" align="center">
                </el-table-column>
                <el-table-column prop="img" label="产品图片" width="130" align="center">
                  <template slot-scope="scope">
                    <img class="logo" :src="scope.row.serviceProductImgUrl"/>
                  </template>
                </el-table-column>
                <el-table-column prop="serviceProductName" label="产品名称" width="180" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="serviceProductList" label="产品配置清单" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="serviceProductLocationProvinceCity" label="适用地区" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="serviceProductCatalog" label="商品类型" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="serviceProductPrice" label="采购价格" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="serviceProductCount" label="数量" align="center" :show-overflow-tooltip="true">
                </el-table-column>
              </el-table>
            </div>
            <div v-if="product.list_select.length != 0" class="quick-tag">
              <span class="bg">所选产品</span>
              <el-tag style="margin-right: 15px" v-for="(item, index) in product.list_select" :key="index" type=''>{{item.serviceProductName}}</el-tag>
            </div>
          </div>
        </div>
        <div class="btn-container">
          <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
          <el-button class="jx-btn" type="primary" @click="submit_product">确定</el-button>
        </div>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: {
          quick: this.$api.order.quick,
          common: this.$api.common,
          model: this.$api.product.template,
        },
        boo: {
          showDialog: false,
          isSubmit: false,
        },      
        mainPage: {
          boo: {
            loading_list: false
          },
          list: [], //已经选好的符合条件的产品
          type_list: [], //订单类型列表
          model_list: [], //产品模板列表
          params: {
            consumerLoginname: "", //客户信息-客户姓名
            mobile: "", //客户信息-客户手机号
            institutionOrderCatalog: "", //订单类型
            institutionOrderId: "", //订单编号
            institutionTemplateId: "", //产品模板
            serviceProductId: "", //服务产品id
          },
        },
        product: {
          boo: {
            loading_list: false
          },
          other: {
            city: "",
            product_radio: 1,
          },
          params_list: {
            serviceProductName: "", //产品名称
            serviceProductLocationProvinceCity: "", //适用地区
          },
          list: [],
          list_select: [],
          city_list: [],
          city_select: [], //选中的城市
        },
        rules: {
          consumerLoginname: [{ required: true, message: '请输入客户名称', trigger: 'blur' }]
        },
			}
		},
    computed: {
      pcRoutes(){
        let _self = this
        if(this.$route.name != 'order_quick_order') return
        _self.getOrderNo()
        _self.getDetail()
        _self.getModelList()
        _self.getTypeList()
        return this.$route.query.id
      }
    },
		mounted(){
      let _self = this
      _self.getOrderNo()
    },
		methods: {
      // 获取订单编号
      getDetail(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            console.log(res)
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.quick.add + '/' + _self.$route.query.id, {}, success)
      },
      // 获取模板列表
      getModelList(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.mainPage.model_list = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.model.pc_list, {}, success)
      },
      // 获取订单类型列表
      getTypeList(){
        let _self = this
        let params = {
          dictCode: 'institutionOrderCatalog' 
        }
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            console.log(res)
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.common.dict, params, success)
      },
      // 获取订单编号
      getOrderNo(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.mainPage.params.institutionOrderId = res.retMsg
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.quick.getOrderNo, {}, success)
      },
      // 添加产品获取符合条件的产品列表
      getProductList(){
        let _self = this
        let arr = []
        _self.product.city_select.forEach(item=>{
          arr.push(item.institutionTemplateProvinceCity)
        })
        _self.product.params_list.serviceProductLocationProvinceCity = arr.toString()
        _self.product.boo.loading_list = true
        let success = (res)=>{
          res = res.data
          _self.product.boo.loading_list = false
          if(res.retCode == 1){
            _self.product.list = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.quick.getProductList, _self.product.params_list, success)
      },
      // 选择符合条件的产品
      selectProduct(list){
        let _self = this
        _self.product.list_select = list
      },
      // 提交选好的产品
      submit_product(){
        let _self = this
        if(_self.product.list_select.length == 0) return _self.$message.error('请选择一个产品')
        _self.mainPage.list = [..._self.mainPage.list, ...JSON.parse(JSON.stringify(_self.product.list_select))]
        _self.boo.showDialog = false
      },
      // 删除选择好的产品
      deteleRow(index){
        let _self = this
        _self.mainPage.list.splice(index, 1)
      },
      viewRow(){
        let _self = this
        _self.product.params_list.serviceProductName = ''
        _self.product.other.product_radio = 1
        _self.product.list = []
        _self.product.list_select = []
        _self.product.city_list = []
        _self.product.city_select = []
        _self.boo.showDialog = true
      },
      querySearch(queryString, cb) {
        let _self = this
        let params = {
          institutionTemplateProvinceCity: queryString
        }
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.product.city_list = res.retObject
            let restaurants = _self.product.city_list
            let results = queryString ? restaurants.filter(_self.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          }else{
            _self.$message.error(res.retMsg)
          }
        } 
        _self.$axios.get(_self.https.quick.getCity, params, success)
      },
      handleSelect(item) {
        let _self = this
        _self.product.city_select.push(item)
        _self.product.other.city = ''
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.institutionTemplateProvinceCity.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      close_city(index){
        let _self = this
        _self.product.city_select.splice(index, 1)
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){
            let arr = []
            _self.mainPage.list.forEach(item=>{
              arr.push(item.serviceProductId)
            })
            let params = {
              consumerLoginname: _self.mainPage.params.consumerLoginname, //客户信息-客户姓名
              mobile: _self.mainPage.params.mobile, //客户信息-客户手机号
              institutionOrderCatalog: _self.mainPage.params.institutionOrderCatalog, //订单类型
              institutionOrderId: _self.mainPage.params.institutionOrderId, //订单编号
              institutionTemplateId: _self.mainPage.params.institutionTemplateId, //产品模板
              serviceProductId: arr.toString(), //服务产品id
            }
            if(params.serviceProductId == '') return _self.$message.error('产品不能为空')
            _self.boo.isSubmit = true
            let success = (res)=>{
              res = res.data
              _self.boo.isSubmit = false
              if(res.retCode == 1){
                _self.$message.success('下单成功')
              }else{
                _self.$message.error(res.retMsg)
              }
            }
            _self.$axios.get(`${_self.https.quick.add}{id}`, params, success)
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
  .select-type .table-item .right span
    width: 78px
  .jx-table
    /deep/ .el-table__body td
      .cell
        height: auto
        line-height: auto
  /deep/ .jx-dialog .el-dialog__body
    padding: 20px 20px
  .active-item
    margin: 20px auto 0
    padding: 10px
    .select-type .item
      margin-bottom: 10px
    .select-type .item .right span
      padding: 0
      margin-right: 12px
      font-size: 17px
    .select-type .item .right span.active
      color: #333
      border: 0
      background: #fff
      font-size: 18px
      font-weight: 600
    .select-type 
      .jx-btn.el-button
        height: 32px !important
        line-height: 32px !important
      .jx-btn.el-button /deep/ span
        color: #fff
        line-height: 32px
        padding: 0 5px
        margin: 0
      /deep/ .el-checkbox__inner
        width: 14px
        padding: 0
        margin-right: 0
      /deep/ .el-checkbox__input
        padding: 0
        margin-right: 0
      /deep/ .el-checkbox__label
        padding: 0
        padding-left: 10px
        margin-right: 0
  .quick-tag
    .bg
      background: url('/static/img/u603.png') no-repeat
      background-size: cover
      padding: 10px
      padding-right: 35px
      margin-right: 10px
    .el-tag--small
      height: 32px
      line-height: 32px
      padding: 0 10px
    /deep/ .el-icon-close:before
      content: "\e6db" !important
  .detail-address
    margin-bottom: 0
    border-bottom: 1px solid #f2f2f2
    padding-bottom: 20px
    /deep/ .el-radio-group
      margin-top: 10px
      span
        padding: 0 6px
        margin: 0
</style>
